<template>
   <div class="mapbox-maps">
    <div id="map">
      <div class="drew">
        <el-tooltip content="图标"  placement="bottom" popper-class="testtooltip">
          <el-tag @click="drewMarker(0)" :type="index==0 ? '' : 'info'" :effect="index===0 ?'dark':'plain'">
            <span class="iconfont icon-ditu_dingwei_o"></span>
          </el-tag>
        </el-tooltip>     
         <el-tooltip content="点"  placement="bottom" popper-class="testtooltip">
          <el-tag @click="drewPoint(1)" :type="index==1 ? '' : 'info'" :effect="index===1 ?'dark':'plain'">
            <span class="iconfont icon-yuan"></span>
          </el-tag>
        </el-tooltip>   
        <el-tooltip content="线"  placement="bottom" popper-class="testtooltip ">
          <el-tag @click="drewLine(2)" :type="index==2 ? '' : 'info'" :effect="index===2 ?'dark':'plain'">
            <span class="iconfont icon-xian"></span>
          </el-tag>
        </el-tooltip>        
        <el-tooltip content="矩形"  placement="bottom" popper-class="testtooltip ">
          <el-tag @click="drewRectangle(3)" :type="index==3 ? '' : 'info'" :effect="index===3 ?'dark':'plain'">
            <span class="iconfont icon-xingzhuang-juxing"></span>
          </el-tag>
        </el-tooltip>        
        <el-tooltip content="面"  placement="bottom" popper-class="testtooltip ">
          <el-tag @click="drewPolygon(4)" :type="index==4 ? '' : 'info'" :effect="index===4 ?'dark':'plain'">
            <span class="iconfont icon-mian"></span>
          </el-tag>
        </el-tooltip>        
        <el-tooltip content="圆"  placement="bottom" popper-class="testtooltip ">
          <el-tag @click="drewCircle(5)" :type="index == 5 ? '' : 'info'" :effect="index===5 ?'dark':'plain'">
            <span class="iconfont icon-xingzhuang-tuoyuanxing"></span>
          </el-tag>
        </el-tooltip>        
        <el-tooltip content="导出"  placement="bottom" popper-class="testtooltip ">
          <el-tag @click="exportPng(6)" :type="index==6 ? '' : 'info'" :effect="index===6 ?'dark':'plain'">
            <span class="iconfont icon-daochu"></span>
          </el-tag>
        </el-tooltip>        
        <el-tooltip content="清除"  placement="bottom" popper-class="testtooltip ">
          <el-tag @click="clearLayerAndSource(7)" :type="dIndex==7 ? '' : 'info'" :effect="dIndex===7 ?'dark':'plain'">
            <span class="iconfont icon-shanchu"></span>
          </el-tag> 
        </el-tooltip>             
      </div>
      <div class="legend">
       <img :src="url" style="height: 169px;"/>
      </div>

    </div>  
  </div>
</template>
<script>
export default{
    name:"MapboxMeasure",
    data(){
      return{
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: require('@/assets/layer-zoom.jpg'),
        mapMarkers:[],//地图标记集合
        marker:{},
        index:-1,
        dIndex:0,
        map:{},
        pbfData_1_5_1: {
          type:'vector',
          tiles:['http://localhost:8081/geoms/get/a_1_5/{z}/{x}/{y}.pbf'],
          minzoom:1,
          maxzoom:5 
        },
        pbfData_5_8: {
          type:'vector',
          tiles:['http://localhost:8081/geoms/get/a_5_10/{z}/{x}/{y}.pbf'],
          minzoom:5,
          maxzoom:10 
        },
        pbfData_8_12: {
          type:'vector',
          tiles:['http://localhost:8081/geoms/get/a_10_15/{z}/{x}/{y}.pbf'],
          minzoom:10,
          maxzoom:15 
        },
        pbfData_12_15: {
          type:'vector',
          tiles:['http://localhost:8081/geoms/get/69_5vel_2/{z}/{x}/{y}.pbf'],
          minzoom:1,
          maxzoom:8 
        },
        pbfData_15_24: {
          type:'vector',
          tiles:['http://localhost:9021/layer//getByteData/187/{z}/{x}/{y}'],
          minzoom:1,
          maxzoom:24 
        },
        geojson: {        
          type:'geojson',
          data:{
          "type": "FeatureCollection",
          "features":[]
          },
          // cluster: true,
          // clusterMaxZoom: 8, // Max zoom to cluster points on
          // clusterRadius: 50 //
        },
        popupTemp:"",
        popup:{},

      }
    },
    mounted() {
     this.loadMap()
    },
    beforeDestroy(){
      this.map.remove()

    },
    methods:{
      loadMap() {
        // 英文标注转换为中文   
        // mapboxgl.setRTLTextPlugin(
        //   "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
        // );
        this.map = window.map=  new mapboxgl.Map({
          accessToken: 'pk.eyJ1Ijoienh0d24iLCJhIjoiY2wzanV3bHduMTZwejNrcXcyd3B1bzBieiJ9.aW_TDqLomftwPvBu7OWqwQ',
          container: 'map',
          style: 'mapbox://styles/mapbox/outdoors-v10', // stylesheet location
          center: [116.790202563,32.656293335], // starting position [lng, lat]
          zoom: 12, // starting zoom
          hash: false,
          //pitch: 45,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
          bearing: 0, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
          antialias: true, //抗锯齿，通过false关闭提升性能
          projection: "globe",
        })
        // 设置语言
        // var language = new MapboxLanguage({ defaultLanguage: "zh" });
        // this.map.addControl(language);

        //地图导航
        var nav = new mapboxgl.NavigationControl();
        this.map.addControl(nav, 'top-right');

        // 比例尺
        var scale = new mapboxgl.ScaleControl({
          maxWidth: 100,
          unit: "metric"
        });
        this.map.addControl(scale,"bottom-left");

        // 全图
        this.map.addControl(new mapboxgl.FullscreenControl());
        // 定位
        this.map.addControl(
          new mapboxgl.GeolocateControl({
          positionOptions: {
              enableHighAccuracy: true
          },
          trackUserLocation: true
          })
        );

        let that = this;
        // that.map.on('zoom', () => {
        //   alert("hhh")
        // });
        that.map.on('load',function () {
          that.map.setFog({
            range: [1.0, 8.0],
            color: "white",
            "horizon-blend": 0.01,
          });
          console.log(that)
          // window.map.addSource('pbfData_1_5_1', that.pbfData_1_5_1);
          // window.map.addSource('pbfData_5_8', that.pbfData_5_8);
          // window.map.addSource('pbfData_8_12', that.pbfData_8_12);
          // window.map.addSource('pbfData_12_15', that.pbfData_12_15);
          window.map.addSource('pbfData_15_24', that.pbfData_15_24);
        
          // window.map.addLayer({
          //   "id": "pbfData_1_5_1",
          //   "type": "circle",
          //   "source": "pbfData_1_5_1",
          //   "source-layer": "point",
          //   paint: {
          //     "circle-color":[
          //       "step",
          //       ["get","elevation"],
          //       "#191970",-25,
          //       "#1E90FF",-15,
          //       "#ADD8E6",-5,
          //       "#008000", 5,
          //       "#FFFF00",15,
          //       "#FFA500",25,
          //       "#FF0000",
          //     ],
          //     "circle-radius": 5,
          //     "circle-opacity": 1
          //   },
          //   layout: {
          //       visibility: 'visible'
          //   },              
          //   "minzoom": 1,
          //   "maxzoom": 5,
          // })

          // window.map.addLayer({
          //   "id": "pbfData_5_8",
          //   "type": "circle",
          //   "source": "pbfData_5_8",
          //   "source-layer": "point",
          //   paint: {
          //     "circle-color":[
          //         "step",
          //         ["get","elevation"],
          //         "#191970",-25,
          //         "#1E90FF",-15,
          //         "#ADD8E6",-5,
          //         "#008000", 5,
          //         "#FFFF00",15,
          //         "#FFA500",25,
          //         "#FF0000",
          //     ],
          //     'circle-radius': 5,
          //     "circle-opacity": 1
          //   },
          //   layout: {
          //       visibility: 'visible'
          //   },              
          //   "minzoom": 5,
          //   "maxzoom": 10,
          // })

          // window.map.addLayer({
          //   "id": "pbfData_8_12",
          //   "type": "circle",
          //   "source": "pbfData_8_12",
          //   "source-layer": "point",
          //   paint: {
          //     "circle-color":[
          //         "step",
          //         ["get","elevation"],
          //         "#191970",-25,
          //         "#1E90FF",-15,
          //         "#ADD8E6",-5,
          //         "#008000", 5,
          //         "#FFFF00",15,
          //         "#FFA500",25,
          //         "#FF0000",
          //     ],
          //     'circle-radius': 5,
          //     "circle-opacity": 1
          //   },
          //   layout: {
          //       visibility: 'visible'
          //   },              
          //   "minzoom": 10,
          //   "maxzoom": 15,
          // })

          // window.map.addLayer({
          //   "id": "pbfData_12_15",
          //   "type": "circle",
          //   "source": "pbfData_12_15",
          //   "source-layer": "point",
          //   paint: {
          //     "circle-color":[
          //         "step",
          //         ["get","deformatio"],
          //          "#191970",-18,
          //         "#1E90FF",-17,
          //         "#ADD8E6",-5,
          //         "#008000", 5,
          //         "#FFFF00",15,
          //         "#FFA500",25,
          //         "#FF0000",
          //     ],
          //     'circle-radius': 5,
          //     "circle-opacity": 1
          //   },
          //   layout: {
          //       visibility: 'visible'
          //   },              
          //   "minzoom": 1,
          //   "maxzoom": 8,
          // })

          window.map.addLayer({
            "id": "pbfData_15_24",
            "type": "circle",
            "source": "pbfData_15_24",
            "source-layer": "point",
            paint: {
              "circle-color":"#191970",
              'circle-radius': 5,
              "circle-opacity": 1
            },
            layout: {
                visibility: 'visible'
            },              
            "minzoom": 1,
            "maxzoom": 24,
          })




           // 添加数据源
          // window.map.addSource("earthquakes", that.geojson); 


         
          // 添加数字图层
          // window.map.addLayer({
          //   id: "cluster-count",
          //   source: 'earthquakes',
          //   type: 'circle',// 我这个类型是圆圈，可以是其他的，比如图标代替什么的
          //   paint: {
          //     "circle-color":[
          //       "step",
          //       ["get","vel"],
          //       "#191970",-25,
          //       "#1E90FF",-15,
          //       "#ADD8E6",-5,
          //       "#008000", 5,
          //       "#FFFF00",15,
          //       "#FFA500",25,
          //       "#FF0000",
          //     ],
          //     'circle-radius': 5,
          //     "circle-opacity": 1
          //   },
          //   layout: {
          //       visibility: 'visible'
          //   }

          // });
          // that.getGeobuf()

          // window.map.addSource("gps-points",that.geojson);
          // window.map.addLayer({                 /* 为地图添加layer */
          //     "id": "gps-points",             /* layer id是route */
          //     "type": "line",            /* line类型layer*/
          //     "source": "gps-points",         /* 资源引用的是上面定义的source*/
          //     "layout": {
          //         "line-join": "round",  /* 线条相交的形状 */
          //         "line-cap": "round"    /* 线条末端形状 */
          //     },
          //     "paint": {
          //         "line-color": "#888",  /* 线条颜色 */
          //         "line-width": 2       /* 线条宽度 */
          //     }
          // });

          // that.loadGeojsons()
        })
        window.map.on('click','pbfData_15_24',(e)=>{
         let that = this
          that.$axios({
            url: "/deformation",
            method: 'post',
            data:{
              geomWkt:'POINT('+e.lngLat.lng+' '+e.lngLat.lat+')'
            },
          })
          .then(function (res) { 
            console.log(res);
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })   

          console.log(e);

        })
        window.map.on('click','large_grid2',(e)=>{
          console.log(e);

        })
      },
    loadGeojsons(){
      debugger
      let that = this
      let url = "/geoms/geojson"
      that.$axios({
        url: url,
        method: 'post',
        data:{},
      })
      .then(function (res) {          
        console.log(res)
        let features = []
        res.data.data.forEach(e=>{
        let geom = JSON.parse(e.geom)            
        features.push({
          "type": "Feature",
          "geometry":geom,
          "properties": {"status": "status"}
        })
        })
        that.map.getSource('gps-points').setData({
          "type": "FeatureCollection",
          "features":[]
        })
      that.map.getSource('gps-points').setData({
      "type": "FeatureCollection",
      "features":features
      })
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })   

    },

    /**
     * 
     * 加载geobuf数据
     * 
     */
    getGeobuf(){

      debugger

      let that = this
      //Make a request for a user with a given ID
      this.$axios({
          url: '/geoms/geobuf/deformation',
          method: 'get',
          data:{},
          responseType: 'arraybuffer'
      })
      .then(function (response) {
        // handle success
        console.log(response);
        var geojson =geobuf.decode(new Pbf(new Uint8Array(response.data)));
        console.log(JSON.stringify(geojson))
        that.loadGeojson(geojson)
        // map.getSource("national-park").setData(geojson)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })     

    },
    /**
     * 
     * 加载geojson数据
     * 
     */
    loadGeojson(geojson){
      this.map.getSource("earthquakes").setData(geojson)
    },


    },
}

</script>
<style  lang="scss">
@import "../../../public/mapbox/mapbox-gl.css";
.mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;
    
}
#map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right: 0;
    
}
.mapboxgl-canvas {
    outline: none;
}
  /* 隐藏mapbox商标 */
.mapboxgl-ctrl-logo {
    display: none;
} 
.drew{
    // width: 316px;
    height: 34px;
    border-radius: 5px;
    z-index: 4;
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 2pxrgba 0, 0, 0, 0.1;
}
.legend{
    width: 65px;
    height: 168px;
    z-index: 4;
    /* border: 1px solid red; */
    position: absolute;
    left: 10px;
    bottom: 60px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: 5px;
}
.text {
  font-size: 14px;
}

//修改文字提示样式
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {   
	border-bottom-color: rgba(148, 147, 147, 0.877)!important;
}
.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {  
	border-bottom-color: rgba(148, 147, 147, 0.877) !important;
}
.testtooltip{
  background: rgba(148, 147, 147, 0.877) !important;  
	box-shadow: 1px 1px 10px 3px #D3D3D6;
  
}
//修改地图比例尺样式
.mapboxgl-ctrl.mapboxgl-ctrl-scale {
	height: 10px;
	background-color:transparent;
	line-height:10%;
	text-align:center
}
</style>